<!-- 三合一搜索栏组件 -->
<template>
  <div class="search-bar-container">
    <!-- 搜索模式切换 -->
    <div class="search-mode-tabs">
      <el-radio-group v-model="searchMode" class="mode-group">
        <el-radio-button label="keyword">
          <el-icon><Search /></el-icon>
          关键词检索
        </el-radio-button>
        <el-radio-button label="advanced">
          <el-icon><Setting /></el-icon>
          高级检索
        </el-radio-button>
        <el-radio-button label="intelligent">
          <el-icon><MagicStick /></el-icon>
          智能检索
        </el-radio-button>
      </el-radio-group>
    </div>

    <!-- 关键词检索 -->
    <div v-show="searchMode === 'keyword'" class="search-panel keyword-panel">
      <div class="search-input-group">
        <el-input
          v-model="keywordQuery"
          size="large"
          placeholder="请输入关键词进行检索..."
          class="search-input"
          @keyup.enter="handleSearch"
        >
          <template #prepend>
            <el-select v-model="searchType" placeholder="类型" style="width: 12vw">
              <el-option label="全部" value="all" />
              <el-option label="信号" value="signal" />
              <el-option label="频谱" value="spectrum" />
              <el-option label="设备" value="device" />
              <el-option label="威胁" value="threat" />
            </el-select>
          </template>
          <template #append>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </template>
        </el-input>
      </div>
      
      <!-- 快速标签 -->
      <div class="quick-tags">
        <el-tag
          v-for="tag in quickTags"
          :key="tag"
          class="quick-tag"
          @click="addQuickTag(tag)"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <!-- 高级检索 -->
    <div v-show="searchMode === 'advanced'" class="search-panel advanced-panel">
      <el-form :model="advancedQuery" label-width="8vw" class="advanced-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="信号类型">
              <el-select v-model="advancedQuery.signalType" multiple placeholder="选择信号类型">
                <el-option label="雷达信号" value="radar" />
                <el-option label="通信信号" value="communication" />
                <el-option label="导航信号" value="navigation" />
                <el-option label="干扰信号" value="jamming" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="频率范围">
              <div class="frequency-range">
                <el-input-number v-model="advancedQuery.freqMin" :min="0" :max="100000" placeholder="最小频率" />
                <span class="range-separator">-</span>
                <el-input-number v-model="advancedQuery.freqMax" :min="0" :max="100000" placeholder="最大频率" />
                <span class="unit">MHz</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="信号强度">
              <el-slider
                v-model="advancedQuery.strength"
                range
                :min="-120"
                :max="0"
                :marks="{ '-120': '-120dBm', '-60': '-60dBm', '0': '0dBm' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调制方式">
              <el-checkbox-group v-model="advancedQuery.modulation">
                <el-checkbox label="AM">AM</el-checkbox>
                <el-checkbox label="FM">FM</el-checkbox>
                <el-checkbox label="PSK">PSK</el-checkbox>
                <el-checkbox label="QAM">QAM</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="handleAdvancedSearch">
            <el-icon><Search /></el-icon>
            执行高级检索
          </el-button>
          <el-button @click="resetAdvancedQuery">
            <el-icon><Refresh /></el-icon>
            重置条件
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 智能检索 -->
    <div v-show="searchMode === 'intelligent'" class="search-panel intelligent-panel">
      <div class="ai-search-container">
        <el-input
          v-model="intelligentQuery"
          type="textarea"
          :rows="3"
          placeholder="请用自然语言描述您的检索需求，例如：找出最近一周在2.4GHz频段出现的异常信号..."
          class="ai-input"
          @keyup.ctrl.enter="handleIntelligentSearch"
        />
        
        <div class="ai-actions">
          <el-button type="primary" @click="handleIntelligentSearch">
            <el-icon><MagicStick /></el-icon>
            智能分析
          </el-button>
          <el-button @click="showAiExamples = !showAiExamples">
            <el-icon><QuestionFilled /></el-icon>
            示例
          </el-button>
        </div>

        <!-- AI示例 -->
        <div v-show="showAiExamples" class="ai-examples">
          <div class="example-title">智能检索示例：</div>
          <div
            v-for="example in aiExamples"
            :key="example"
            class="example-item"
            @click="intelligentQuery = example"
          >
            {{ example }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Search, Setting, MagicStick, Refresh, QuestionFilled } from '@element-plus/icons-vue'

// 搜索模式
const searchMode = ref('keyword')

// 关键词检索
const keywordQuery = ref('')
const searchType = ref('all')
const quickTags = ref(['雷达信号', '通信干扰', '频谱异常', '威胁识别', '信号分析'])

// 高级检索
const advancedQuery = reactive({
  signalType: [],
  freqMin: null,
  freqMax: null,
  strength: [-80, -20],
  modulation: []
})

// 智能检索
const intelligentQuery = ref('')
const showAiExamples = ref(false)
const aiExamples = ref([
  '找出最近24小时内在UHF频段出现的雷达信号',
  '检索信号强度异常的通信信号',
  '分析2.4GHz频段的干扰源分布',
  '查找调制方式为PSK的异常信号',
  '寻找可能的威胁信号特征'
])

// 事件定义
const emit = defineEmits(['search', 'advanced-search', 'intelligent-search'])

// 搜索方法
const handleSearch = () => {
  emit('search', {
    query: keywordQuery.value,
    type: searchType.value
  })
}

const handleAdvancedSearch = () => {
  emit('advanced-search', advancedQuery)
}

const handleIntelligentSearch = () => {
  emit('intelligent-search', {
    query: intelligentQuery.value
  })
}

const resetAdvancedQuery = () => {
  Object.assign(advancedQuery, {
    signalType: [],
    freqMin: null,
    freqMax: null,
    strength: [-80, -20],
    modulation: []
  })
}

const addQuickTag = (tag) => {
  keywordQuery.value = tag
  handleSearch()
}
</script>

<style scoped>
.search-bar-container {
  width: 100%;
  background: rgba(31, 45, 61, 0.95);
  border-radius: 0.8vw;
  padding: 2vw;
  margin-bottom: 2vw;
}

.search-mode-tabs {
  margin-bottom: 2vw;
}

.mode-group {
  width: 100%;
}

:deep(.el-radio-button__inner) {
  background: transparent;
  border-color: #2d3a4b;
  color: #bfcbd9;
  padding: 1vh 2vw;
  border-radius: 0.6vw;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: #409EFF;
  border-color: #409EFF;
  color: #ffffff;
}

.search-panel {
  min-height: 8vh;
}

.search-input-group {
  margin-bottom: 1.5vh;
}

/* 最高优先级的输入框样式 */
:deep(.el-input .el-input__inner) {
  background: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
  font-size: 1.1vw;
  height: 5vh;
}

:deep(.el-input__inner) {
  background: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
  font-size: 1.1vw;
  height: 5vh;
}

/* 覆盖Element Plus的默认样式 */
:deep(.el-input) {
  --el-input-bg-color: rgba(45, 58, 75, 0.8) !important;
  --el-input-border-color: #2d3a4b !important;
  --el-input-text-color: #bfcbd9 !important;
}

:deep(.el-input__wrapper) {
  background-color: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
}

:deep(.el-input__inner::placeholder) {
  color: #8591a3 !important;
}

:deep(.el-input__inner:focus) {
  background: rgba(45, 58, 75, 0.9) !important;
  border-color: #409EFF !important;
}

:deep(.el-input-group__prepend) {
  background: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-select .el-input__inner) {
  background: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-select .el-input__inner:focus) {
  border-color: #409EFF !important;
}

:deep(.el-select-dropdown) {
  background: rgba(38, 52, 69, 0.95) !important;
  border-color: #2d3a4b !important;
}

:deep(.el-select-dropdown__item) {
  background: transparent !important;
  color: #bfcbd9 !important;
}

:deep(.el-select-dropdown__item:hover) {
  background: rgba(64, 158, 255, 0.2) !important;
  color: #409EFF !important;
}

:deep(.el-select-dropdown__item.selected) {
  background: #409EFF !important;
  color: #ffffff !important;
}

:deep(.el-input-group__append) {
  background: transparent;
  border-color: #2d3a4b;
}

.quick-tags {
  display: flex;
  gap: 1vw;
  flex-wrap: wrap;
}

.quick-tag {
  background: rgba(64, 158, 255, 0.2);
  border: 1px solid #409EFF;
  color: #409EFF;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-tag:hover {
  background: #409EFF;
  color: #ffffff;
}

.advanced-form {
  margin-top: 1vh;
}

:deep(.el-form-item__label) {
  color: #bfcbd9 !important;
  font-size: 1vw;
}

:deep(.el-input-number .el-input__inner) {
  background: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-input-number .el-input__inner:focus) {
  border-color: #409EFF !important;
}

:deep(.el-textarea .el-textarea__inner) {
  background: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-textarea .el-textarea__inner:focus) {
  border-color: #409EFF !important;
}

:deep(.el-textarea .el-textarea__inner::placeholder) {
  color: #8591a3 !important;
}

.frequency-range {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.range-separator {
  color: #bfcbd9;
}

.unit {
  color: #8591a3;
  font-size: 0.9vw;
}

:deep(.el-slider__runway) {
  background: #2d3a4b;
}

:deep(.el-slider__bar) {
  background: #409EFF;
}

:deep(.el-checkbox__label) {
  color: #bfcbd9;
}

.ai-search-container {
  position: relative;
}

.ai-input {
  margin-bottom: 1.5vh;
}

:deep(.el-textarea__inner) {
  background: rgba(45, 58, 75, 0.8);
  border-color: #2d3a4b;
  color: #bfcbd9;
  font-size: 1vw;
  resize: none;
}

.ai-actions {
  display: flex;
  gap: 1vw;
  margin-bottom: 1vh;
}

.ai-examples {
  background: rgba(45, 58, 75, 0.6);
  border-radius: 0.6vw;
  padding: 1.5vh 1.5vw;
  border: 1px solid #2d3a4b;
}

.example-title {
  color: #bfcbd9;
  font-weight: bold;
  margin-bottom: 1vh;
  font-size: 1vw;
}

.example-item {
  color: #8591a3;
  cursor: pointer;
  padding: 0.8vh 1vw;
  border-radius: 0.4vw;
  margin-bottom: 0.5vh;
  font-size: 0.9vw;
  transition: all 0.3s;
}

.example-item:hover {
  background: rgba(64, 158, 255, 0.2);
  color: #409EFF;
}

:deep(.el-button) {
  border-radius: 0.6vw;
  font-size: 1vw;
  padding: 1vh 2vw;
}
</style>